<template>
  <div>
    <NavBar>
      <template v-slot:default>购物车</template>
    </NavBar>
    <div class="container">
      <div class="cart-box">
        <div class="cart-body" v-show="list.length">
          <van-checkbox-group ref="checkboxGroup" @change="groupChange" v-model="result">
            <van-swipe-cell :right-width="50" v-for="(item, index) in list" :key="index">
              <div class="good-item">
                <van-checkbox :name="item.id" />
                <div class="good-img"><img v-lazy="item.goods.cover_url" alt=""></div>
                <div class="good-desc">
                  <div class="good-title">
                    <span>{{item.goods.title}}</span>
                    <span>x{{item.goods.stock}}</span>
                  </div>
                  <div class="good-btn">
                    <div class="price"><small>¥</small>{{item.goods.price + '.00'}}</div>
                    <van-stepper integer :min="1" :max="item.goods.stock" :model-value="item.num" :name="item.id" async-change @change="onChange" />
                  </div>
                </div>
              </div>
              <template #right>
                <van-button square icon="delete" type="danger" class="delete-button" @click="deleteGood(item.id)" />
              </template>
            </van-swipe-cell>
          </van-checkbox-group>
        </div>
        <!-- 金额结算 -->
        <van-submit-bar class="submit-all" :price="total * 100" @submit="onSubmit" button-text="结算">
          <van-checkbox @click="allCheck" :checked="checkAll">全选</van-checkbox>
        </van-submit-bar>
        <!-- 暂无数据 -->
        <div class="empty" v-show="!list.length">
          <img class="empty-cart" src="~assets/images/empty-car.png" alt="空购物车">
          <div class="title">购物车空空如也</div>
          <van-button round color="#1baeae" type="primary" block @click="goTo">前往选购</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, computed, onActivated } from "vue";
import NavBar from "components/common/navbar/NavBar";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import {
  getCartsList,
  updateCarts,
  removeCarts,
  checkedCarts,
} from "network/cart.js";
import store from "../../store";

export default {
  name: "shopcart",
  setup() {
    const router = useRouter();
    let result = ref([]);
    // 数据模型， 状态
    const state = reactive({
      list: [],
      result: [], //id数组
      checkAll: true,
    });

    const init = () => {
      getCartsList().then((res) => {
        state.list = res.data;
        state.result = res.data
          .filter((n) => n.is_checked == 1)
          .map((item) => item.id);
      });
    };

    onMounted(() => {
      init();
    });
    onActivated(() => {
      init();
    });

    // 前往购物
    const goTo = () => {
      router.push({ path: "/home" });
    };

    // 复选框改变处理
    const groupChange = (result) => {
      if (result.length == state.list.length) {
        state.checkAll = true;
      } else {
        state.checkAll = false;
      }
      state.result = result;
      // 改变数据表中选中状态
      checkedCarts(result);
    };

    const deleteGood = (id) => {
      removeCarts(id).then((res) => {
        if (res.status === 204) {
          Toast.success("已移除");
          init();
          store.dispatch("updateCartsCount");
        }
      });
    };

    // 异步改变购物车数量
    const onChange = (value, detail) => {
      updateCarts(detail.name, { num: value }).then((res) => {
        //将在onMounted中的list中的num也要改
        state.list.forEach((item) => {
          if (item.id == detail.name) {
            item.num = value;
          }
        });
      });
    };

    const allCheck = () => {
      if (!state.checkAll) {
        state.result = state.list.map((item) => item.id);
        state.checkAll = true;
      } else {
        state.result = [];
        state.checkAll = false;
      }
    };

    const total = computed(() => {
      let sum = 0;
      state.list
        .filter((item) => state.result.includes(item.id))
        .forEach((item) => {
          sum += parseInt(item.num) * parseFloat(item.goods.price);
        });
      return sum;
    });

    const onSubmit = () => {
      if (state.result.length == 0) {
        Toast.fail("请选择商品进行结算");
        return;
      } else {
        router.push({ path: "/createorder" });
      }
    };

    return {
      result,
      groupChange,
      deleteGood,
      onSubmit,
      goTo,
      onChange,
      allCheck,
      total,
      ...toRefs(state),
    };
  },
  components: {
    NavBar,
  },
};
</script>

<style lang="scss">
.container {
  .cart-box {
    .cart-body {
      margin: 60px 0 100px 0;
      padding-left: 10px;
      .good-item {
        display: flex;
        .good-img {
          img {
            width: 100px;
            height: auto;
          }
        }
        .good-desc {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          padding: 20px;
          .good-title {
            display: flex;
            justify-content: space-between;
          }
          .good-btn {
            display: flex;
            justify-content: space-between;
            .price {
              font-size: 16px;
              color: red;
              line-height: 28px;
            }
            .van-icon-delete {
              font-size: 20px;
              margin-top: 4px;
            }
          }
        }
      }
      .delete-button {
        width: 50px;
        height: 100%;
      }
    }
    .empty {
      width: 50%;
      margin: 0 auto;
      text-align: center;
      margin-top: 200px;
      .empty-cart {
        width: 150px;
        margin-bottom: 20px;
      }
      .van-icon-smile-o {
        font-size: 50px;
      }
      .title {
        font-size: 16px;
        margin-bottom: 20px;
      }
    }
    .submit-all {
      margin-bottom: 54px;
      z-index: 0;
      .van-checkbox {
        margin-left: 0px;
      }
      .van-submit-bar__text {
        margin-right: 10px;
      }
      .van-submit-bar__button {
        background: red;
      }
    }
    .van-checkbox__icon--checked .van-icon {
      background-color: red;
      border-color: red;
    }
  }
}
</style>
